<template>
    <el-button plain @click="show = true">
        Click to open the Dialog
    </el-button>

    <el-dialog draggable v-model="show" title="新增测量" width="400" align-center>
        <!-- 表单 -->
        <el-form :model="form" label-width="auto">
            <el-form-item size="large" label="编号" v-if="form.id">
                <el-input v-model="form.id" placeholder="请输入名称" disabled />
            </el-form-item>
            <el-form-item size="large" label="名称">
                <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item size="large" label="单位">
                <el-input v-model="form.unit" placeholder="请输入单位" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="show = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
const show = ref(false);

// do not use same name with ref
const form = ref({
    name: '',
    unit: '',
})

const props = defineProps({
    editObj: Object
})

console.log('myForm', props.editObj);

// 将props.editObj赋值给form

watchEffect(() => {
    form.value = {
        ...props.editObj
    };
}) 
// 自定义事件
const emit = defineEmits(['submit']) 
// 暴露show属性
defineExpose({
    show
})

const onSubmit = () => {
    show.value = false;
    emit('submit', form.value)
} 
</script>